<template>
  <div id="app">
    <div class="conter">

      <!-- 背景信息-->
      <img alt="背景图片" src="../切图/背景.png" />
    </div>
    <div class="jihui">还有{{ number_of_draws }}次抽奖机会</div>
    <div class="conter0">
      <!-- 弹出框信息-->
      <div :class="isactive ? 'mengban' : 'mengbanisactive'">
        <div>
          <img src="../切图/弹窗顶部.png" alt="" />
          <img class="jiangpin" src="../切图/奖品图.png" alt="" />
        </div>
        <div class="kongbai">
          <div class="kongbaineirong">{{ msg }}</div>
          <span @click="guanbi">朕知道了</span>
        </div>
      </div>
         <!-- 中奖信息-->
      <div
        :class="['conter' + (i + 1), { bg2: index == i }]"
        v-for="(item, i) in list"
        :key="i"
      >
        <img :src="item.image" height="100px" width="180px" alt="我是奖品" />
        <span>{{ item.prize_name }}</span>
      </div>
      <div class="conter9" @click="move">
        <span></span>
      </div>
    </div>

     <!-- 底部导航-->
    <div class="bottom">
      <div class="bottom1">活动规则</div>
      <div class="bottom2">
        <p>暂无活动规则</p>
        <p>*所有奖品和活动均与苹果公司无关</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      list: [], //奖品列表
      index: 0, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
      count: 8, // 总共有多少个位置
      times: 0, // 转动跑格子次数,
      cycle: 10, // 转动基本次数：
      speed: 0, // 初始转动速度
      timer: 0, // 转动定时器
      prize: 0, // 中奖位置，
      number_of_draws: 0,//设置中奖次数
      isactive: false, //状态判断
      msg: "",//弹出信息
    };
  },
  mounted() {
    this.list = [
      {
        id: 1,
        number: 1,
        prize_name: "一等奖",
        image: require("../切图/奖品图.png"),
      },
      {
        id: 2,
        number: 2,
        prize_name: "二等奖",
        image: require("../切图/奖品图.png"),
      },
      {
        id: 3,
        number: 3,
        prize_name: "三等奖",
        image: require("../切图/奖品图.png"),
      },
      {
        id: 4,
        number: 4,
        prize_name: "谢谢惠顾",
        image: require("../切图/奖品图.png"),
      },
      {
        id: 5,
        number: 5,
        prize_name: "再来一次",
        image: require("../切图/奖品图.png"),
      },
      {
        id: 6,
        number: 6,
        prize_name: "未中奖",
        image: require("../切图/奖品图.png"),
      },
      {
        id: 7,
        number: 7,
        prize_name: "中奖啦",
        image: require("../切图/奖品图.png"),
      },
      {
        id: 8,
        number: 8,
        prize_name: "五等奖",
        image: require("../切图/奖品图.png"),
      },
    ];
    this.number_of_draws = 3;
  },
  methods: {
    move() {
      if (this.number_of_draws === 0) {
        this.isactive = true;
        this.msg = "次数用完了";
      } else if (this.times != 0) {
        alert("正在抽奖");
      } else {
        this.speed = 100;
        this.prize = Math.ceil(Math.random() * 8);
        this.startRoll();
      }

      if (this.number_of_draws !== 0) {
        this.number_of_draws--;
      } else {
        return 0;
      }
    },

    startRoll() {
      this.times += 1;
      this.oneRoll(); //初始化
      this.usePrize();
    },
    oneRoll() {
      let index = this.index; // 当前转动到哪个位置
      const count = 8; // 总共有多少个位置
      index += 1;
      if (index > count - 1) {
        index = 0;
      }
      this.index = index;
    },

    usePrize() {
      // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
      if (this.times > this.cycle + 10 && this.prize === this.index) {
        clearTimeout(this.timer);

        this.times = 0;

        if (this.prize == 1) {
          this.isactive = true;
          this.msg = "恭喜一等奖";
        } else if (this.prize == 2) {
          // alert("恭喜你二等奖");
          this.isactive = true;
          this.msg = "恭喜二等奖";
        } else if (this.prize == 3) {
          // alert("恭喜你三等奖");
          this.isactive = true;
          this.msg = "恭喜三等奖";
        } else if (this.prize == 4) {
          // alert("谢谢惠顾");
          this.msg = "谢谢惠顾";
          this.isactive = true;
        } else if (this.prize == 5) {
          // alert("再来一次");
          this.msg = "再来一次";
          this.isactive = true;
        } else if (this.prize == 6) {
          // alert("未中奖");
          this.isactive = true;
          this.msg = "未中奖";
        } else if (this.prize == 7) {
          // alert("中奖啦");
          this.isactive = true;
          this.msg = "中奖啦";
        } else if (this.prize == 8) {
          // alert("恭喜你二等奖");
          this.isactive = true;
          this.msg = "恭喜你五等奖";
        } else {
          // alert("什么也没有");
          this.isactive = true;
          this.msg = "什么也没有";
        }
      } else {
        if (this.times < this.cycle - 20) {
          this.speed -= 4; // 加快转动速度
        } else {
          this.speed += 10; // 抽奖即将结束，放慢转动速度
        }
        this.timer = setTimeout(this.startRoll, this.speed); //开始转动
      }
    },
    guanbi() {
      this.isactive = false;
    },
  },
};
</script>

<style lang="less" scoped>
body,
html {
  margin: 0;
  padding: 0;
}
img {
  border: 0;
}
.conter {
  position: relative;
  width: 750px;
  height: 1229px;
  display: block;
}
.conter0 {
  position: absolute;
  top: 461px;

  width: 648px;
  height: 500px;
  left: 50px;
  right: 50px;

  .conter1 {
    position: absolute;
    top: 30px;
    left: 37px;
    width: 198px;
    height: 139px;

    span {
      display: block;
      margin-left: -31px;
      margin-top: -13px;
      font-size: 20px;
      text-align: center;
    }
  }

  .conter2 {
    position: absolute;
    top: 31px;
    left: 234px;
    width: 192px;
    height: 134px;

    span {
      display: block;
      margin-left: -25px;
      margin-top: -13px;
      font-size: 20px;
      text-align: center;
    }
  }

  .conter3 {
    position: absolute;
    top: 31px;
    left: 432px;
    width: 189px;
    height: 135px;

    span {
      display: block;
      margin-left: -19px;
      margin-top: -13px;
      font-size: 20px;
      text-align: center;
    }
  }

  .conter4 {
    position: absolute;
    top: 180px;
    left: 432px;
    width: 189px;
    height: 142px;

    span {
      display: block;
      margin-left: -19px;
      margin-top: -13px;
      font-size: 20px;
      text-align: center;
    }
  }

  .conter5 {
    position: absolute;
    top: 338px;
    left: 432px;
    width: 189px;
    height: 140px;

    span {
      display: block;
      margin-left: -19px;
      margin-top: -13px;
      font-size: 20px;
      text-align: center;
    }
  }

  .conter6 {
    position: absolute;
    top: 338px;
    left: 238px;
    width: 189px;
    height: 138px;

    span {
      display: block;
      margin-left: -25px;
      margin-top: -13px;
      font-size: 20px;
      text-align: center;
    }
  }

  .conter7 {
    position: absolute;
    top: 338px;
    left: 43px;
    width: 189px;
    height: 138px;

    span {
      display: block;
      margin-left: -31px;
      margin-top: -13px;
      font-size: 20px;
      text-align: center;
    }
  }

  .conter8 {
    position: absolute;
    top: 183px;
    left: 43px;
    width: 189px;
    height: 138px;

    span {
      display: block;
      margin-left: -31px;
      margin-top: -13px;
      font-size: 20px;
      text-align: center;
    }
  }

  .conter9 {
    position: absolute;
    top: 180px;
    left: 233px;
    width: 189px;
    height: 138px;

    span {
      display: block;
      margin-left: -143px;
      margin-top: 37px;
      font-size: 40px;
      text-align: center;
      color: #fff;
    }
  }
}

.bg2 {
  border-radius: 40px;

  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.jihui {
  position: absolute;
  width: 250px;
  height: 100px;
  font-size: 2rem;
  top: 347px;
  left: 250px;
}
.bottom {
  display: block;
  background-color: #660e88;
  padding-bottom: 140px;
  width: 750px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.bottom1 {
  text-align: center;
  font-size: 30px;
}
.bottom2 p {
  font-size: 20px;
  margin-left: 50px;
}
.mengbanisactive {
  display: none;
}
.mengban {
  position: absolute;
  top: -120px;
  left: 62px;
  z-index: 1000;
  transform: rotate(0deg);

  img {
    display: block;
    width: 540px;
    height: 200px;
  }
  .jiangpin {
    position: absolute;
    display: block;
    width: 316px;
    height: 200px;
    margin-top: -200px;
    margin-left: 119px;
  }
  .kongbai {
    position: relative;
    width: 540px;
    height: 500px;
    background: #ffff;
    .kongbaineirong {
      position: absolute;
      width: 540px;
      height: 107px;
      font-size: 50px;
      color: black;
      margin-top: 160px;
      border-radius: 90px;
      text-align: center;
      line-height: 95px;
    }
  }
  span {
    position: absolute;
    display: block;
    width: 528px;
    height: 50px;
    font-size: 30px;
    font-weight: 50px;
    text-align: center;
    margin-top: 400px;
    background: chocolate;
    border-radius: 50px;
    color: #fff;
  }
}
</style>
